<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>个性化推荐</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">
	<style>
		.recommend-container {
			padding: 20px;
			max-width: 1200px;
			margin: 0 auto;
		}
		.user-profile {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			padding: 25px;
			border-radius: 12px;
			margin-bottom: 25px;
		}
		.profile-stats {
			display: flex;
			justify-content: space-around;
			margin-top: 20px;
		}
		.stat-item {
			text-align: center;
		}
		.stat-number {
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 5px;
		}
		.recommend-section {
			background: #fff;
			border-radius: 8px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			margin-bottom: 25px;
			overflow: hidden;
		}
		.section-header {
			background: #f8f9fa;
			padding: 15px 20px;
			border-bottom: 1px solid #e9ecef;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.section-title {
			font-size: 16px;
			font-weight: 600;
			color: #333;
		}
		.product-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
			gap: 20px;
			padding: 20px;
		}
		.product-card {
			border: 1px solid #e9ecef;
			border-radius: 8px;
			overflow: hidden;
			transition: transform 0.2s, box-shadow 0.2s;
			cursor: pointer;
		}
		.product-card:hover {
			transform: translateY(-2px);
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
		}
		.product-image {
			width: 100%;
			height: 180px;
			object-fit: cover;
		}
		.product-info {
			padding: 15px;
		}
		.product-name {
			font-size: 16px;
			font-weight: 500;
			color: #333;
			margin-bottom: 8px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.product-desc {
			color: #666;
			font-size: 14px;
			margin-bottom: 10px;
			line-height: 1.4;
		}
		.product-price {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.price {
			color: #e74c3c;
			font-size: 18px;
			font-weight: bold;
		}
		.original-price {
			color: #999;
			text-decoration: line-through;
			font-size: 14px;
		}
		.recommend-reason {
			background: #e8f5e8;
			color: #2e7d2e;
			font-size: 12px;
			padding: 4px 8px;
			border-radius: 4px;
			margin-top: 8px;
			display: inline-block;
		}
		.preference-tags {
			display: flex;
			gap: 8px;
			margin-top: 15px;
			flex-wrap: wrap;
		}
		.tag {
			background: #f0f9ff;
			color: #0369a1;
			padding: 4px 12px;
			border-radius: 16px;
			font-size: 12px;
			border: 1px solid #bae6fd;
		}
		.empty-state {
			text-align: center;
			padding: 60px 20px;
			color: #999;
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<div class="recommend-container">
			<!-- 页面标题 -->
			<div class="page-title">
				<h2>个性化推荐</h2>
				<p>基于您的浏览历史和购买偏好，为您精心推荐衡阳本地特色商品</p>
			</div>

			<!-- 用户偏好分析 -->
			<div class="user-profile">
				<h3><i class="el-icon-user"></i> 您的购买偏好分析</h3>
				<div class="preference-tags">
					<span v-for="tag in userPreferences" :key="tag" class="tag">{{tag}}</span>
				</div>
				<div class="profile-stats">
					<div class="stat-item">
						<div class="stat-number">{{userStats.totalOrders}}</div>
						<div>总订单数</div>
					</div>
					<div class="stat-item">
						<div class="stat-number">{{userStats.favoriteCategory}}</div>
						<div>最爱品类</div>
					</div>
					<div class="stat-item">
						<div class="stat-number">{{userStats.avgOrderValue}}</div>
						<div>平均订单金额</div>
					</div>
					<div class="stat-item">
						<div class="stat-number">{{userStats.loyaltyLevel}}</div>
						<div>会员等级</div>
					</div>
				</div>
			</div>

			<!-- 为您推荐 -->
			<div class="recommend-section">
				<div class="section-header">
					<span class="section-title">
						<i class="el-icon-star-on" style="color: #f39c12;"></i>
						为您推荐
					</span>
					<el-button size="small" @click="refreshRecommendations">换一批</el-button>
				</div>
				<div class="product-grid">
					<div v-for="product in forYouProducts" :key="product.id" class="product-card" @click="viewProduct(product)">
						<img :src="product.image" :alt="product.name" class="product-image">
						<div class="product-info">
							<div class="product-name">{{product.name}}</div>
							<div class="product-desc">{{product.description}}</div>
							<div class="product-price">
								<span class="price">¥{{product.price}}</span>
								<span v-if="product.originalPrice" class="original-price">¥{{product.originalPrice}}</span>
							</div>
							<span class="recommend-reason">{{product.reason}}</span>
						</div>
					</div>
				</div>
			</div>

			<!-- 相似购买推荐 -->
			<div class="recommend-section">
				<div class="section-header">
					<span class="section-title">
						<i class="el-icon-connection" style="color: #3498db;"></i>
						购买了此商品的用户还买了
					</span>
				</div>
				<div class="product-grid">
					<div v-for="product in similarProducts" :key="product.id" class="product-card" @click="viewProduct(product)">
						<img :src="product.image" :alt="product.name" class="product-image">
						<div class="product-info">
							<div class="product-name">{{product.name}}</div>
							<div class="product-desc">{{product.description}}</div>
							<div class="product-price">
								<span class="price">¥{{product.price}}</span>
								<span v-if="product.originalPrice" class="original-price">¥{{product.originalPrice}}</span>
							</div>
							<span class="recommend-reason">{{product.reason}}</span>
						</div>
					</div>
				</div>
			</div>

			<!-- 浏览历史推荐 -->
			<div class="recommend-section">
				<div class="section-header">
					<span class="section-title">
						<i class="el-icon-view" style="color: #9b59b6;"></i>
						基于浏览历史的推荐
					</span>
				</div>
				<div class="product-grid">
					<div v-for="product in historyBasedProducts" :key="product.id" class="product-card" @click="viewProduct(product)">
						<img :src="product.image" :alt="product.name" class="product-image">
						<div class="product-info">
							<div class="product-name">{{product.name}}</div>
							<div class="product-desc">{{product.description}}</div>
							<div class="product-price">
								<span class="price">¥{{product.price}}</span>
								<span v-if="product.originalPrice" class="original-price">¥{{product.originalPrice}}</span>
							</div>
							<span class="recommend-reason">{{product.reason}}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 引入依赖 -->
	<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					userPreferences: ['衡阳特产', '本地蔬菜', '湘莲类', '传统糕点', '山茶油'],
					userStats: {
						totalOrders: 38,
						favoriteCategory: '衡阳特产',
						avgOrderValue: '￥138',
						loyaltyLevel: '银卡会员'
					},
					forYouProducts: [
						{
							id: 1,
							name: '衡阳湘莲',
							description: '衡阳本地优质湘莲，颗粒饱满营养丰富',
							price: 28.8,
							originalPrice: 35.8,
							image: 'https://p1.ssl.qhimgs1.com/sdr/400__/t01eb66981cebfbe57b.jpg',
							reason: '您经常购买衡阳特产'
						},
						{
							id: 2,
							name: '衡阳黄花菜干',
							description: '祁东黄花菜，地理标志产品，营养价值高',
							price: 45.0,
							originalPrice: 55.0,
							image: 'https://p1.ssl.qhimgs1.com/sdr/400__/t04b775f481d488950b.jpg',
							reason: '您对黄花菜类特别喜爱'
						},
						{
							id: 3,
							name: '衡阳茶油',
							description: '纯天然山茶油，压榨工艺，香味浓郁',
							price: 88.0,
							image: 'https://p0.ssl.qhimgs1.com/sdr/400__/t01f3555127973c7414.jpg',
							reason: '匹配您的购买频次'
						}
					],
					similarProducts: [
						{
							id: 4,
							name: '衡阳双水包子',
							description: '衡阳传统特色小吃，韧性十足香味独特',
							price: 22.0,
							image: 'https://p2.ssl.qhimgs1.com/sdr/400__/t0435e175ec832995ec.png',
							reason: '购买衡阳特产的用户也喜欢'
						},
						{
							id: 5,
							name: '衡阳玉麟糕',
							description: '传统手工制作，香甜软糯老少皆宜',
							price: 15.8,
							originalPrice: 20.8,
							image: 'https://p0.ssl.qhimgs1.com/sdr/400__/t01764b5cdb342b2f20.jpg',
							reason: '衡阳传统特色糕点'
						}
					],
					historyBasedProducts: [
						{
							id: 7,
							name: '衡阳正宗羊肚菌菇',
							description: '衡阳传统名吃，菌味浓郁口感一流',
							price: 58.0,
							image: 'https://p0.ssl.qhimgs1.com/sdr/400__/t04cf95832f8fed43a0.jpg',
							reason: '基于您的浏览历史'
						}
					]
				}
			},
			methods: {
				refreshRecommendations() {
					this.$message.success('推荐已刷新');
					// 实际应用中这里会重新请求推荐数据
				},
				viewProduct(product) {
					this.$message.info(`查看商品: ${product.name}`);
					// 实际应用中这里会跳转到商品详情页
				}
			}
		});
	</script>
</body>
</html>